﻿@page "/"
@using SkiaSharp.Views.Blazor
@using SkiaSharp

<PageTitle>Index</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<SurveyPrompt Title="How is Blazor working for you?" />

<button class="btn btn-primary m-1" @onclick="OnClickImg" type="button">更新绘图</button>
<br />

<SKCanvasView OnPaintSurface="OnPaintSurface" style="width:480px; height:240px" @ref="canvasView" @onclick="OnClickImg" />

@code {

    //private ElementReference canvasView;//这个参数无法转换类型为SKCanvasView
    private SKCanvasView canvasView;

    private void OnClickImg()
    {
        //引发画布更新绘图
        canvasView.Invalidate();
    }

    void OnPaintSurface(SKPaintSurfaceEventArgs e)
    {
        var canvas = e.Surface.Canvas;

        canvas.Clear(SKColors.SkyBlue);

        using var paint = new SKPaint
            {
                Color = SKColors.Black,
                IsAntialias = true,
                Typeface = SkiaChinaFont.ChinaFont,
                TextSize = 24
            };

        string msg = $"{DateTimeOffset.Now:T}, 还有1万行Skia绘图代码...";
        canvas.DrawText(msg, 0, 30, paint);

        using var linePaint = new SKPaint()
            {
                Color = (DateTimeOffset.Now.Second % 4 <= 1) ? SKColors.Red : SKColors.Green,
                Style = SKPaintStyle.Stroke,//不填充
                StrokeWidth = 3,
            };
        canvas.DrawRect(10, 50, e.Info.Width - 20, e.Info.Height - 60, linePaint);

        msg += $", linePaint.Color={linePaint.Color}, skContainer.CanvasSize={e.Info.Size}";
        Console.WriteLine(msg);

    }
}